<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>springmvc测试</title>
</head>
<body>

<form id="myForm">
    <label>
        <span>分类ID:</span>
        <input type="number" name="cateId">
    </label>
    <label>
        <span>分类名称:</span>
        <input type="text" name="cateName">
    </label>
    <hr>
    <table id="tableId1">
        <thead>
            <tr>
                <th columnName="id"></th>
                <th columnName="name"></th>
                <th columnName="gender"></th>
                <th columnName="email"></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <br><br>
    <button type="button" id="submitBtnByMap">Map 方式接收, String 方式返回</button>
    <button type="button" id="submitBtnByMap2">Map 方式接收, map 方式返回</button>
    <br><br>
    <button type="button" id="submitBtnByModel">Model 方式接收, String 方式返回</button>
    <button type="button" id="submitBtnByModel2">Model 方式接收, model 方式返回</button>
    <br><br>
    <button type="button" id="submitBtnByRP">@RequestParam 方式接收, String 方式返回</button>
</form>

</body>

<script src="/js/jquery-2.1.1.min.js"></script>
<script>
    $(function() {
        $("#submitBtnByMap").click(function () {
            fSaveByJsonString("/category/save-by-map.do");
        });

        $("#submitBtnByMap2").click(function () {
            fSaveByJsonString("/category/save-by-map-2.do");
        });

        $("#submitBtnByModel").click(function() {
            fSaveByJsonString("/category/save-by-model.do");
        });

        $("#submitBtnByModel2").click(function() {
            fSaveByJsonString("/category/save-by-model-2.do");
        });

        $("#submitBtnByRP").click(function() {
            fSaveByJsonObject("/category/save.do",getData());
        });
    });

    function fSaveByJsonString(url) {
        var obj = {};
        obj['cateId'] = $("input[name=cateId]").val();
        obj['cateName'] = $("input[name=cateName]").val();

        $.ajax({
            url: url,
            method: 'post',
            contentType: 'application/json', // 这句不加出现415错误:Unsupported Media Type
            data: JSON.stringify(obj), // 以json字符串方式传递
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                console.log("error...");
                console.log(data);
            }
        });
    }

    function fSaveByJsonObject(url ,tableMap) {
        //构造ajax传输的参数，ajax传输的内容必须是一个对象，这里设置tableMap字符串作为键，tableMap的json字符串作为value
        var param = {"tableMap":JSON.stringify(tableMap)};

        //不指定contentType: 'application/json'，传输的是什么内容格式？
        $.ajax({
            url: url,
            method: 'post',
            data: param,
            // contentType: 'application/json',
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                console.log("error...");
                console.log(data);
            }
        });
    }

    function getData() {
        var tableMap = {};

        //根据table的id获取table的jquery对象$table
        var $table = $("#tableId1");

        //tableArray是用来存储业务对象的数组
        var tableArray = [];
        //遍历table中th属性为columnName的元素，遍历的是jquery对象
        $table.find("thead th[columnName]").each(function(i,n){
            var $this = $(this);

            //用th标签上的属性columnName及其值，作为tableArray的内容
            tableArray.push({
                columnName: $this.attr('columnName')
            });
        });

        //将获取到的tableArray数组设置到tableMap对象中，tableId1为键，tableArray为值
        tableMap["tableId1"] = tableArray;
        return tableMap;
    }
</script>
</html>